<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="test" style="width: 500px;min-height: 500px;margin: 0 auto;border: 1px dashed wheat;"> 
			<div id="tips" style="margin: 10px ;">将图片拖拽到方框中</div>
			
		</div>
		
		
		<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
		<script src="../vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#test',
				data:{
					
				},
				mounted:function(){
					$(document).on({
						dragover: function(e) {
							e.preventDefault()
						},
						drop: function(e) {
//							e.stopImmediatePropagation();		
							e.preventDefault();
						}
					})
					$('#test').on({
						dragover: function(ev) {
							
						},
						drop:function(e){
							e.preventDefault();							
//							e.originalEvent.dataTransfer.dropEffect = 'copy';
							console.log(e.originalEvent.dataTransfer)							
					        //获取拖拽过来的对象,文件对象集合
					       files = e.originalEvent.dataTransfer.files
							console.log(files)
							for(var i=0;i<files.length;i++){
								var file = files[i]
								console.log(file)
								if(window.navigator.userAgent.indexOf("Safari") >= 1) {
									var src = window.URL.createObjectURL(file);
//									var src = window.webkitURL.createObjectURL(file);						
								}else{
									var src = window.URL.createObjectURL(file);
								}
								console.log(src)
								$('#test').append('<img src="' + src + '"  />')
							}
						}
					})
				},
				methods:{
					GetImg:function(event){
						var file = event.target.files[0]
						var filename = file.name //文件名 
						var type = filename.substring(filename.lastIndexOf(".")).toLowerCase(); //（把路径中的所有字母全部转换为小写）    文件类型 
						console.log(file)
						//筛选文件格式
						var AllImgExt = ".jpg|.png|.jpeg|";
						var type = filename.substring(filename.lastIndexOf(".")).toLowerCase(); //（获取文件格式，转化成小写）    
						if(AllImgExt.indexOf(type) == -1) {
							$('#reload').modal()
							$('#reload .tips').html('该文件类型不允许上传。请上传 jpg/png/jpeg类型的文件  ')
							return false;
						} else {			
							//添加图片，填写文件名
//							$('#img_name').text(filename)
							//判断浏览器
							if(window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {
								var src = window.webkitURL.createObjectURL(file);						
							}else{
								var src = window.URL.createObjectURL(file);
							}
							$('#imgs').html('<img src="' + src + '"  />')
						}
					}
				}
			})
		</script>
	</body>
</html>
